<script setup>
import { Upload } from '@element-plus/icons-vue'
import AddType from '../../articleType/edit/index.vue'

const route = useRoute()
const router = useRouter()

const status = reactive({
    editData: route.query.id,//是否编辑数据
    addTypeVisible: false,//添加类型
    submitLoading: false,//提交按钮点击时的等待效果
})
const data = reactive({
    data: {},//数据
    type: [],//分类
})
const rules = reactive({
    tid: [{ required: true, message: '请选择类型', trigger: 'blur' }],
    title: [{ required: true, min: 5, max: 64, message: '标题必须在5~64个字符之间', trigger: 'blur' }],
})
const formRef = ref()

onMounted(() => {
    getData()
    getType()
})

//获取信息
const getData = () => {
    if (!status.editData) {//新增数据
        data.data = {}
        return false
    }
    axios.get('/article/info', {
        params: { id: route.query.id }
    }).then(response => {
        data.data = response.data
    })
}
//获取类型
const getType = () => {
    axios.get('/auth/articleTypeList').then(response => {
        data.type = func.listToTree(response.data.list)
    })
}
//提交信息
const submit = (form) => {
    form.validate((valid, fields) => {
        if (!valid) return false
        status.submitLoading = true
        axios.post('/article/edit', {
            ...data.data
        }).then(response => {
            sys.tip(response)
            if (response.status == 1) getData()
            setTimeout(() => {
                status.submitLoading = false
            }, 500)
        }).catch(error => {
            setTimeout(() => { status.submitLoading = false }, 500)
        })
    })
}
</script>

<template>
    <div>
        <el-dialog v-model="status.addTypeVisible" title="添加类型" draggable width="700">
            <AddType :dialog="true"
                @status="(data) => { if (data.update) getType(); if (data.close) status.addTypeVisible = false }" />
        </el-dialog>
        <Breadcrumb :title="['文章', status.editData ? '编辑' : '新增']" :path="['/article/list']" :back="route.query.back" />
        <el-card>
            <template #header>
                <span>基本信息</span>
            </template>
            <el-form class="edit" ref="formRef" :model="data.data" :rules="rules">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="data.data.title" clearable />
                </el-form-item>
                <el-form-item label="选择类型" prop="tid">
                    <el-cascader v-model="data.data.tid" :options="data.type" filterable clearable
                        :props="{ expandTrigger: 'hover', emitPath: false, checkStrictly: true, value: 'id', label: 'name', children: 'children' }"
                        style="width: calc(100% - 98px);max-width:calc(500px - 98px);" />
                    <el-button class="ml10" v-if="$power('/articleType/edit')"
                        @click="() => { status.addTypeVisible = true }">添加类型</el-button>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="data.data.description" type="textarea" />
                </el-form-item>
                <el-form-item label="图片">
                    <ImageListUpload :list="data.data.images" :maxCount="10"
                        @change="(list) => { data.data.images = list }" />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="mt20">
            <template #header>
                <span>详细信息</span>
            </template>
            <el-form class="edit">
                <el-form-item label="详细信息">
                    <Editor :body="data.data.body" @editBody="(body) => { data.data.body = body }" />
                </el-form-item>
                <el-affix position="bottom" z-index="10">
                    <el-form-item label="&nbsp;" class="button-affix">
                        <el-button type="primary" v-if="$power('/article/edit')" :icon="Upload"
                            :loading="status.submitLoading" @click="submit(formRef)">提交</el-button>
                        <el-button v-if="status.editData" @click="getData()"
                            :disabled="status.submitLoading">刷新&重置</el-button>
                        <el-button type="warning" :disabled="status.submitLoading" plain
                            @click="() => { router.push(route.query.back) }">返回</el-button>
                    </el-form-item>
                </el-affix>
            </el-form>
        </el-card>
    </div>
</template>

<style scoped lang="scss"></style>
